<template>
  <div class="chart-wrapper" :style="{height:chartHeight+'px'}">
      <div v-if="option" ref="control" class="chart-control" :style="{height:chartHeight+'px'}"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import chartTheme from "./theme.json";
import Parser from "./parser";
import $ from "@/common";
$;

var dataStyle = {
  selected: {
    borderWidth: 3,
    borderColor: "#eeb0db" // #ff92ab
  }
};
echarts.registerTheme("default", chartTheme);
export default {
  props: {
    chartHeight: {},
    model: {},
    data: {},
    tab: {
      default: 0
    },
    selectable: {},
    //冻结model更新，用于强制更新option
    freeze: {
      default: false
    },
    loading: {
      default: false
    }
  },
  data() {
    return {
      option: null,
      selectIndex: null
    };
  },
  watch: {
    data() {
      this.updateaData();
    },
    model() {
      if (this.freeze) return;
      this.option = Parser.model(this.model);
      this.setChartOption(true);
    },
    tab() {
      this.option = Parser.model(this.model, this.tab);
      this.updateaData();
    },
    loading(v) {
      if (!this.$chart) return;
      if (v) {
        this.$chart.showLoading({
          text: "加载中",
          color: "#2b85e4",
          textColor: "#000",
          maskColor: "rgba(255, 255, 255, 0.8)",
          zlevel: 0
        });
      } else {
        this.$chart.hideLoading();
      }
    }
  },
  computed: {},
  methods: {
    resize() {
      this.$chart.resize();
    },
    initChart() {
      if (this.$refs.control) {
        this.$chart = echarts.init(this.$refs.control, "default");
        this.$chart.on("click", e => {
          this.$emit("chartClick", e);
          this.setHighlight(e.dataIndex, true);
          if (this.selectable) {
            this.selectItem(e.dataIndex);
          }
        });
      }
    },
    selectItem(index) {
      this.updateDataStyle([
        {
          index: index,
          style: dataStyle.selected
        },
        {
          index: this.selectIndex,
          style: null
        }
      ]);
      for (let i in this.option.series) {
        var serie = this.option.series[i];
        if (serie.type === "line") {
          //改变折线点大小
          serie.symbolSize = (value, param) => {
            return param.dataIndex === index ? 12 : 4;
          };
        }
      }
      this.selectIndex = index;
      this.setChartOption();
    },
    setHighlight(index, v) {
      this.$chart.dispatchAction({
        type: v ? "highlight" : "downplay",
        dataIndex: index
      });
    },
    updateDataStyle(data) {
      if (!$.isArray(data)) data = [data];
      for (let item of data) {
        if (item && !item.index && item.index !== 0) {
          continue;
        }
        for (let i in this.option.series) {
          let serie = this.option.series[i];
          let row = serie && serie.data && serie.data[item.index];
          if (row) {
            if (typeof row !== "object") {
              serie.data[item.index] = {
                value: row
              };
              row = serie.data[item.index];
            }
            row = $.setObj(row, { itemStyle: {} });
            if (item.style === null) {
              serie.data[item.index] = row.value;
            } else {
              row.itemStyle = $.setObj(
                {
                  emphasis: item.style,
                  normal: item.style,
                  selected: true
                },
                row.itemStyle
              );
            }
          }
        }
      }
    },
    setChartOption(notMerge = false) {
      this.option.tooltip._formatter = params => {
        var index = params[0].dataIndex;
        return index;
      };
      //this.selectIndex = null;
      this.$chart.setOption(this.option, {
        notMerge
      });
      //console.info(JSON.stringify(this.option, null, 2));
    },
    getOption() {
      return this.$chart.getOption();
    },
    //强制更新
    forceOption(o) {
      this.option = o;
      this.$chart.setOption(o, {
        notMerge: true
      });
    },
    updateaData() {
      this.option = Parser.data(this.model, this.data, this.option, this.tab);
      this.setChartOption();
    },
    setGridData(index, data) {
      this.option = Parser.data(
        this.model.grids[index],
        data,
        this.option,
        this.tab,
        parseInt(index) + 1
      );
      this.setChartOption();
    }
  },
  created() {
    this.option = Parser.model(this.model, this.tab);
  },
  mounted() {
    this.initChart();
    this.updateaData();
    this.spreadWatcher = e => {
      if (this.$chart) {
        setTimeout(() => {
          this.$chart.resize();
        }, 200);
      }
    };
    window.APP.$on("spread", this.spreadWatcher);
  },
  destroyed() {
    window.APP.$off("spread", this.spreadWatcher);
  }
};
</script>

<style>
.chart-control {
  width: 100%;
  height: 320px;
}
</style>
